<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
    <head>
	    <title>Spriii SocialHair App</title>
	    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	    <meta name="apple-mobile-web-app-capable" content="yes" />
	    <link rel="stylesheet" type="text/css" href="assets/css/jq.ui.css" />
	    <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
	    <link rel="stylesheet" type="text/css" href="assets/css/icons.css" />
        
        <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
        <!-- not sure whats this, but it will crash $.ajax
        <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>	
        -->
        
	    <script type="text/javascript">
	      //initial hard-coded setup variables
	      //anything unset here will be auto-fetched from their facebook page
	      var facebookPageID = 314564917276; //required facebook ID
	      var hName          = '';
	      var hPhone         = '';
	      var hWebsite       = '';
	      var hAddress       = '';
	
	      var colorScheme    = 'candy'; //color options = slate, aloe, water, candy (default), melon, mint, royal, sand
	    </script>
    </head>
 
    <body>
	    <div id="jQUi">    
            <header id="custom_header">
	           <div class="header-top">
	               <div id="logo"><img src="assets/img/logo.jpg"></div>
	               <div id="call"><a href=""><span aria-hidden="true" class="icon-phone"></span>&nbsp;Call</a></div>
	           </div>
	           <ul>
	              <li><a href="#feed" class="tabselected navitem" data-transition="fade"><span aria-hidden="true" class="icon-home"></span>&nbsp;Feed</a></li>
	              <li><a href="#contact" class="navitem" data-transition="fade"><span aria-hidden="true" class="icon-location"></span>&nbsp;Contact</a></li>
	           </ul>
            </header>
            <div id="content">
	          <div class="panel" id="feed" data-header="custom_header" selected="true"></div>
	          <div class="panel" id="contact" data-header="custom_header">
	            <div class="item">
	              <div class="inner">     
	                <h2 class="name"></h2>
	                <div class="address"></div>
	                <div class="contact-options">
	                  <a href="" id="phone"><span aria-hidden="true" class="icon-phone"></span>&nbsp;&nbsp;Phone</a>
	                  <a href="" class="website" target="_blank"><span aria-hidden="true" class="icon-earth"></span>&nbsp;&nbsp;Website</a>
	                  <a href="" class="facebook" target="_blank"><span aria-hidden="true" class="icon-facebook"></span>&nbsp;&nbsp;Facebook</a>
	                </div>
	                <a onclick="aboutToggle()" class="about toggle"><span aria-hidden="true" class="icon-plus"></span>&nbsp;&nbsp;About</a>
	                <div class="description"></div>         
	                <a onclick="hoursToggle()" class="hours toggle"><span aria-hidden="true" class="icon-plus"></span>&nbsp;&nbsp;Opening Times</a>
	                <ul class="openingtimes"></ul>           
	              </div>
	              <div class="map"></div>
	            </div>
	          </div>
            </div>
	    </div>
    </body>
    
    <!-- our jqMobi scripts -->
    <script type="text/javascript" charset="utf-8" src="assets/js/jqmobi/jq.mobi.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="assets/js/jqmobi/jq.ui.min.js"></script>
    <!-- our customise scripts -->
    <script type="text/javascript" charset="utf-8" src="assets/js/main.js"></script>
    <script type="text/javascript" charset="utf-8" src="assets/js/camera.js"></script>
	<script type="text/javascript" charset="utf-8" src="assets/js/postscript.js"></script>
</html>